<script lang="ts" setup name="LoveTalk">
    import axios from 'axios';
    import { nanoid } from 'nanoid';
    import { useLoveTalkStore } from '@/store/lovetalk';

    const loveTalkStore = useLoveTalkStore();

    async function getLoveTalk() {
        // let result = await axios.get('https://api.uomg.com/api/rand.qinghua?format=json');
        // let obj = { id: nanoid(), title: result.data.content };

        // 下面是上面的高级写法：连续解构 + 重命名
        let { data: { content: title } } = await axios.get('https://api.uomg.com/api/rand.qinghua?format=json');
        let obj = { id: nanoid(), title };
        // talkList.push(obj);
    }
</script>

<template>
    <div class="talk">
        <button @click="getLoveTalk">获取一句土味情话</button>
        <ul>
            <li v-for="talkItem in loveTalkStore.talkList" :id="talkItem.id">{{ talkItem.title }}</li>
        </ul>
    </div>
</template>

<style scoped>
    .talk {
        background-color: orange;
        padding: 10px;
        border-radius: 10px;
        box-shadow: 0 0 10px;
    }
</style>